<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>预约挂号</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
    <script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
    <style type="text/css">
        .search {
            position: relative;
            height: 0.8rem;
            padding: 0 0.54rem;
            background-color: #eee;
        }
        
        .search .iconfont {
            position: absolute;
            left: 40%;
            top: 0.24rem;
            color: #999;
            z-index: 2;
            font-size: 0.24rem;
        }
        
        .search input {
            position: absolute;
            top: 0.13rem;
            height: 0.56rem;
            width: 6.44rem;
            /*padding-left: 33%;*/
           text-align: center;
            border: 1px solid #fff;
            border-radius: 0.27rem;
            font-size: 0.24rem;
        }
        
        .contain {
            position: relative;
            /*margin-top: 0.08rem;*/
        }
        
        #btns {
            width: 2.44rem;
            position: absolute;
            font-size: 0.3rem;
            /*padding-top: 0.08rem;;*/
            background-color: #f5f5f5;
        }
        
        #btns text {
            width: 2.44rem;
            height: 0.9rem;
            line-height: 0.88rem;
            text-align: center;
            display: block;
            /*float: left;*/
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        #divs {
            margin-left: 2.44rem;
        }
        
        #divs div {
            height: 100px;
            font-size: 60px;
            background-color: #fff;
            display: none;
            padding-left: 0.3rem;
        }
        #divs div text {
        	display: block;
        	font-size: 0.3rem;
        	color: #666;
        	line-height: 0.9rem;
        	height: 0.9rem;
        }
        #btns .color {
            background-color: #fff;
            border-right: none;
            height: 0.96rem;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var btns = document.getElementById("btns").getElementsByTagName("text");
            var divs = document.getElementById("divs").getElementsByTagName("div");
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i; //自定义属性，用于关联下面的大盒子
                btns[i].onclick = function() {

                    for (var j = 0; j < btns.length; j++) {
                        //把所有的button清空类名
                        btns[j].className = "";
                    }
                    //点击的那个盒子添加指定类名
                    this.className = "color";
                    for (var i = 0; i < divs.length; i++) {
                        //先让底下的div全部隐藏
                        divs[i].style.display = "none";
                    }
                    //然后给当前所点击按钮相关联的盒子添加指定属性
                    divs[this.index].style.display = "block";
                }
            }
        }
    </script>
</head>

<body>
    <header>
        <span></span>
        <text class="title">今日挂号</text>
        <text class="iconfont icon-llmainpageback"></text>
        <text class="iconfont icon-iconfontclosesmall"></text>
        <text class="iconfont icon-gengduo"></text>
    </header>
    <section class="search">
        <text class="iconfont icon-search"></text>
        <form action="">
        	
        	<input type="search" name="" id="" value="" placeholder="搜索科室" />
        </form>
    </section>
    <section class="contain">
        <div id="btns">
            <text class="color">内科</text>
            <text>儿科</text>
            <text>妇产科</text>
            <text>外科</text>
            <text>皮肤性病科</text>
            <text>中医科</text>
            <text>口腔科</text>
            <text>耳鼻喉头颈科</text>
            <text>眼科</text>
            <text>骨科</text>
            <text>肿瘤科</text>
            <text>精神心理科</text>
            <text>其他科室</text>
        </div>
        <div id="divs">
            <div style="display:block;">
            	<text id="project">风湿科</text>
            	<text>肝炎肠道科</text>
            	<text>呼吸内科</text>
            	<text>老年科</text>
            	<text>内分泌科</text>
            	<text>神经内科</text>
            	<text>肾内科</text>
            	<text>特诊老年科</text>
            	<text>特征内科</text>
            	<text>消化内科</text>
            	<text>心内科</text>
            	<text>血透专病门诊</text>
            	<text>血液内科</text>
            </div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
        </div>
    </section>

</body>
<script type="text/javascript">
	document.getElementById("project").onclick = function(){
		console.log("haha")
		 window.location.href="confirmSelectDoctor.html?backurl="+window.location.href; 
	}
</script>
</html>